1
|
|
|
// gulpfile.js handles all Gulp front-end tasks. |
2
|
|
|
|
3
|
|
|
// Require the Gulp Package Manager |
4
|
|
|
var gulp = require('gulp'); |
5
|
|
|
// Require Gulp SASS (Pre-Processor, Handles SASS) |
6
|
|
|
var sass = require('gulp-sass'); |
7
|
|
|
// Require Gulp PostCSS (Post-Processor, Handles Autoprefixer and CSSnano) |
8
|
|
|
var postcss = require('gulp-postcss'); |
9
|
|
|
// Require Autoprefixer (Adds Browser Prefixes) |
10
|
|
|
var autoprefixer = require('autoprefixer'); |
11
|
|
|
// Require CSSnano (Compresses and Optimizes CSS) |
12
|
|
|
var cssnano = require('cssnano'); |
13
|
|
|
// Require Gulp Notify (Notifies Us About Tasks & Errors) |
14
|
|
|
var notify = require("gulp-notify"); |
15
|
|
|
// Creates a Node Notifier Constant for Error Notifications |
16
|
|
|
const notifier = require('node-notifier'); |
17
|
|
|
|
18
|
|
|
// This handles Gulp errors and allows us to maintain our watch function. |
19
|
|
|
function swallowError (error) { |
20
|
|
|
// Gets the error copy. |
21
|
|
|
var errorCopy = error.toString(); |
22
|
|
|
// Spits out the Error Notification. |
23
|
|
|
notifier.notify({ |
24
|
|
|
title: 'Uh oh, something went wrong! 💀', |
25
|
|
|
message: 'Check your console for more information on the error!', |
26
|
|
|
icon: '' |
27
|
|
|
}); |
28
|
|
|
// Logs the error details to the console. |
29
|
|
|
console.log(errorCopy); |
|
|
|
|
30
|
|
|
// Stops the task and restarts Gulp. |
31
|
|
|
this.emit('end'); |
32
|
|
|
} |
33
|
|
|
|
34
|
|
|
// This task runs SASS on our SCSS files and compiles them into CSS. |
35
|
|
|
gulp.task('sass', function(){ |
36
|
|
|
return gulp.src('resources/assets/scss/*.scss') |
37
|
|
|
// Runs SASS. |
38
|
|
|
.pipe(sass()) |
39
|
|
|
// Checks for an error, and if it exists stops everything. |
40
|
|
|
.on('error', swallowError) |
41
|
|
|
// This is the output folder for this task. |
42
|
|
|
.pipe(gulp.dest('public/css/compiled')) |
43
|
|
|
// Notifies you that your code was successfully compiled. |
44
|
|
|
.pipe(notify({ |
45
|
|
|
"title": "You were successfully Sassy! 💁", |
46
|
|
|
"message": "Your SASS has been compiled into CSS.", |
47
|
|
|
"icon": "" |
48
|
|
|
})) |
49
|
|
|
}); |
50
|
|
|
|
51
|
|
|
// This task runs both Autoprefixer and CSSnano on our compiled CSS. |
52
|
|
|
gulp.task('optimize', function () { |
53
|
|
|
// Selects the Autoprefixer and CSSnano PostCSS plugins. |
54
|
|
|
var plugins = [ |
55
|
|
|
autoprefixer({browsers: ['last 2 version']}), |
56
|
|
|
cssnano() |
57
|
|
|
]; |
58
|
|
|
return gulp.src('public/css/compiled/*.css') |
59
|
|
|
// Runs PostCSS and the plugins specified above. |
60
|
|
|
.pipe(postcss(plugins)) |
61
|
|
|
// Checks for an error, and if it exists stops everything. |
62
|
|
|
.on('error', swallowError) |
63
|
|
|
// This is the output folder for this task. |
64
|
|
|
.pipe(gulp.dest('public/css/compiled/')) |
65
|
|
|
// Notifies you that your code was successfully compiled. |
66
|
|
|
.pipe(notify({ |
67
|
|
|
"title": "Mmm, tasty optimization. 🍔", |
68
|
|
|
"message": "Your CSS was successfully optimized.", |
69
|
|
|
"icon": "" |
70
|
|
|
})) |
71
|
|
|
}); |
72
|
|
|
|
73
|
|
|
// This task watches both the SCSS and Compiled folders and then runs the above tasks as appropriate. This task allows you to run "Gulp" once in your terminal and forget about it. |
74
|
|
|
gulp.task('default',function() { |
75
|
|
|
gulp.watch('resources/assets/scss/**/*.scss',['sass']); |
76
|
|
|
// gulp.watch('css/compiled/*.css',['optimize']); |
77
|
|
|
}); |
78
|
|
|
|